<template>
  <div class="auth-detail">
    <!-- 头部操作栏 -->
    <div class="detail-header">
      <span class="title">权限组详情</span>
      <div class="detail-btns" v-if="showEditDeleteButtons">
        <el-button type="warning" @click="onEdit" class="edit-btn">
          编辑
        </el-button>
        <el-button plain @click="onDelete" class="delete-btn">
          删除
        </el-button>
      </div>
    </div>

    <!-- 主体表单内容 -->
    <el-form label-position="left" label-width="70px" class="detail-form">
      <!-- 权限组名称 -->
      <el-form-item label="权限组" class="auth-section-row">
        <template v-if="authData.name">
          <span class="form-content-text">
            {{ authData.name }}
          </span>
        </template>
        <template v-else-if="
          (props.authData.parentGroupId === 0 && props.authData.accessGroupId === 1) ||
          (props.authData.parentGroupId === 1 && props.authData.accessGroupId === 0)
        ">
          <span class="no-permissions">全部权限</span>
        </template>
        <template v-else>
          <span class="no-permissions">暂无数据</span>
        </template>
      </el-form-item>


      <!-- 管理员列表 -->
      <!-- 管理员列表待修改 -->
      <el-form-item label="管理员" class="auth-section-row user-section">
        <div class="user-list-wrapper">
          <div class="user-list">
            <template v-if="authData.users && authData.users.length > 0">

              <div v-for="user in authData.users" :key="user.id" class="user-tag">
                <!-- 管理员头像 -->
                <img :src="UserOutlined" alt="user" />


                <span>{{ user.name }}</span>
              </div>
            </template>
            <template v-else>
              <span class="no-permissions">暂无数据</span>
            </template>
          </div>
        </div>
      </el-form-item>

    </el-form>

    <!-- 权限信息标题 -->
    <div class="section-divider">
      <span class="section-title">
        权限信息
      </span>
    </div>
    <el-form label-position="left" label-width="70px" class="detail-form">
      <el-form-item label="后台权限" class="auth-section-row perm-section" label-width="70px">
        <div class="permissions-wrapper">
          <!-- 管理权限 -->
          <div class="permission-group">
            <div class="group-header">
              具有管理权限
            </div>
            <div class="group-tags">
              <template v-if="filteredManagePermissions && filteredManagePermissions.length > 0">
                <el-tag v-for="(perm, index) in filteredManagePermissions" :key="'manage-' + index" type="info"
                  effect="plain" class="perm-tag">
                  {{ perm }}
                </el-tag>
              </template>
              <template v-else-if="
                (props.authData.parentGroupId === 0 &&
                  props.authData.accessGroupId === 1) ||
                (props.authData.parentGroupId === 1 &&
                  props.authData.accessGroupId === 0)
              "><span class="no-permissions">全部权限</span>
              </template>
              <template v-else>
                <span class="no-permissions">暂无数据</span>
              </template>
            </div>
          </div>

          <!-- 查看权限 -->
          <div class="permission-group">
            <div class="group-header">
              具有查看权限
            </div>
            <div class="group-tags">
              <template v-if="filteredViewPermissions && filteredViewPermissions.length > 0">
                <el-tag v-for="(perm, index) in filteredViewPermissions" :key="'view-' + index" type="info"
                  effect="plain" class="perm-tag">
                  {{ perm }}
                </el-tag>
              </template>
              <template v-else-if="
                (props.authData.parentGroupId === 0 &&
                  props.authData.accessGroupId === 1) ||
                (props.authData.parentGroupId === 1 &&
                  props.authData.accessGroupId === 0)
              ">
                <span class="no-permissions">全部权限</span>
              </template>
              <template v-else>
                <span class="no-permissions">暂无数据</span>
              </template>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, defineProps, computed } from "vue";
import UserOutlined from "@/assets/images/svg/ UserOutlined.svg";

interface AuthUser {
  id: string;
  name: string;
  type: "internal" | "outsource";
}

interface AuthData {
  id: string;
  name: string;
  users: AuthUser[];
  managePermissions: string[];
  viewPermissions: string[];
  accessGroupId: string;
  parentGroupId: number | string;
  permissions?: any[];
}

// 父节点ID集合
const parentNodes = new Set<number>();

// 计算过滤后的管理权限
const filteredManagePermissions = computed(() => {
  if (!props.authData || !props.authData.permissions) {
    return props.authData?.managePermissions || [];
  }

  // 构建父节点ID集合
  parentNodes.clear();
  if (props.authData.permissions) {
    // 找出所有权限节点的父节点ID
    props.authData.permissions.forEach((perm) => {
      if (perm.parentId && perm.parentId !== "0") {
        parentNodes.add(Number(perm.parentId));
      }
    });
  }

  // 过滤掉父节点权限，只保留叶子节点权限
  return props.authData.managePermissions.filter((permName, index) => {
    // 如果有对应的权限对象
    if (props.authData.permissions && index < props.authData.permissions.length) {
      const perm = props.authData.permissions.find((p) => p.groupName === permName);
      if (perm) {
        return !parentNodes.has(perm.accessRightDefaultId);
      }
    }
    return true;
  });
});

// 计算是否显示编辑和删除按钮
const showEditDeleteButtons = computed(() => {
  // 超级管理组不显示编辑和删除按钮
  // 条件1: parentGroupId=0 且 accessGroupId=1 (超级管理组)
  // 条件2: parentGroupId=1 且 accessGroupId=0 (超级管理组的另一种表示)
  if (
    (props.authData.parentGroupId === 0 && props.authData.accessGroupId === 1) ||
    (props.authData.parentGroupId === 1 && props.authData.accessGroupId === 0)
  ) {
    return false;
  }
  return true;
});

// 计算过滤后的查看权限
const filteredViewPermissions = computed(() => {
  if (!props.authData || !props.authData.permissions) {
    return props.authData?.viewPermissions || [];
  }

  // 过滤掉父节点权限，只保留叶子节点权限
  return props.authData.viewPermissions.filter((permName, index) => {
    // 如果有对应的权限对象
    if (props.authData.permissions && index < props.authData.permissions.length) {
      const perm = props.authData.permissions.find((p) => p.groupName === permName);
      if (perm) {
        return !parentNodes.has(perm.accessRightDefaultId);
      }
    }
    return true;
  });
});

const props = defineProps<{
  authData: any;
  accessGroupId?: string;
}>();

const emit = defineEmits<{
  (e: "edit", id: string): void;
  (e: "delete", id: string): void;
}>();

const onEdit = () => {
  emit("edit", props.authData.id);
};

const onDelete = () => {
  emit("delete", props.authData.id);
};
</script>

<style scoped lang="scss">
.auth-detail {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;

  /* 头部样式 */
  .detail-header {
    background: #f4f4f9;
    height: 50px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;

    .title {
      font-size: 16px;
      font-weight: 800;
      color: #020131;
    }

    .detail-btns {
      display: flex;
      margin-right: 16px;
      gap: 12px;

      :deep(.el-button) {
        width: 100px;
        height: 36px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;

        &.edit-btn {
          background: #2258F6;
          border-color: #2258F6;
          color: #fff;
        }

        &.delete-btn {
          color: #ff4242;
          border-color: #ff4242;
        }
      }
    }
  }

  /* 表单容器 */
  .detail-form {
    padding: 0 16px;

    /* 表单项通用样式 */
    :deep(.el-form-item) {
      margin-bottom: 0;
      padding: 16px 0;
      align-items: flex-start;

      &:last-child {
        padding-top: 25px;
      }

      .el-form-item__label {
        font-size: 14px;
        font-weight: 800;
        color: #9f9f9f;
        padding-left: 0;
        line-height: 1.5;
      }

      .el-form-item__content {
        line-height: 1.5;
      }
    }

    /* 用户标签样式 */
    .user-section {
      :deep(.el-form-item__content) {
        width: 100%;
      }

      .user-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        .user-tag {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 32px;
          padding: 0 12px;
          background: #e8f1fe;
          border: none;
          border-radius: 4px;

          img {
            width: 22px;
            height: 22px;
            display: block;
            margin-right: 5px;
          }

          span {
            font-size: 14px;
            color: #020131;
          }
        }
      }
    }

    /* 权限区块样式 */
    .perm-section {
      :deep(.el-form-item__content) {
        width: 100%;
      }

      .permissions-wrapper {
        .permission-group {
          margin-bottom: 20px;

          &:last-child {
            margin-bottom: 0;
          }

          .group-header {
            font-size: 14px;
            font-weight: 800;
            color: #020131;
            margin-bottom: 12px;
          }

          .group-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;

            .perm-tag {
              height: 30px;
              padding: 0 12px;
              background: #e8f1fe;
              border: none;
              border-radius: 4px;
              font-size: 14px;
              color: #020131;
            }
          }
        }
      }
    }
  }

  /* 区块标题 */
  .section-divider {
    padding: 16px 0;
    margin: 8px 0;
    background: #f4f4f9;

    .section-title {
      font-size: 16px;
      font-weight: 800;
      color: #020131;
      padding: 0 16px;
    }
  }

  /* 内容文本样式 */
  .form-content-text {
    font-size: 14px;
    font-weight: 800;
    color: #020131;
  }

  /* 无权限提示样式 */
  .no-permissions {
    color: #999;
    font-size: 14px;
  }
}
</style>
